/**
 * Created by dio on 2017/2/22 0022.
 */
import React, {Component} from "react";
import {
    ActivityIndicator,
    Alert,
    Image,
    InteractionManager,
    Linking,
    ScrollView,
    Text,
    TouchableOpacity,
    View
} from "react-native";
import chjStyle from "../../../CustomStyle";
import Util from "../../Util";
import ModuleButton from "../../module/ModuleButton";
import ChjGallery from "./ChjGallery";
import MoreCarParams from "../MoreCarParams";
import MoreCarReports from "../MoreCarReports";
import CarsOfShop from "../CarsOfShop";
import {Actions} from "react-native-router-flux";
import ScrollableTabView from "react-native-scrollable-tab-view";
import customStyle from "../../../../common/style/CustomStyle.js";

export default class CarDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pageArray: [],
            textArray: [],
            isLoading: true
        };
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.requestCarDetail()
        });
    }

    render() {
        if (this.state.isLoading) {
            return (
                <ActivityIndicator
                    animating={true}
                    style={{alignItems: 'center', justifyContent: 'center', height: chjStyle.height}}
                    size="large"/>);
        }

        return (<View style={{flex: 1}}>
            <ScrollView style={chjStyle.mainContainer}>
                {
                    this.renderImageSwiper()
                }
                <ModuleButton
                    ref='viewShopCars'
                    onClickedListener={() => this.viewAllShopCars()}
                    buttonStyle={{
                        backgroundColor: '#ea2',
                        width: chjStyle.getActualSizeInHorizontal(750),
                        height: chjStyle.getActualSizeInVertical(88)
                    }}
                    textStyle={{
                        includeFontPadding: false,
                        position: 'absolute',
                        fontWeight: 'bold',
                        color: '#fff',
                        backgroundColor: 'rgba(0,0,0,0)',
                        width: chjStyle.getActualSizeInHorizontal(750),
                        left: chjStyle.getActualSizeInHorizontal(20),
                        top: chjStyle.getActualSizeInVertical(20),
                        fontSize: chjStyle.getActualFontSize(38),
                        textAlign: 'left'
                    }}
                    text={""}
                    textStyle2={{
                        includeFontPadding: false,
                        position: 'absolute',
                        color: '#fff',
                        backgroundColor: 'rgba(0,0,0,0)',
                        width: chjStyle.getActualSizeInHorizontal(300),
                        right: chjStyle.getActualSizeInHorizontal(20),
                        top: chjStyle.getActualSizeInVertical(21),
                        fontSize: chjStyle.getActualFontSize(30),
                        textAlign: 'right'
                    }}
                    text2={"进入店铺>"}
                />
                {
                    this.renderCarBasicinfo()
                }
                {
                    this.renderCarCiasLisence()
                }
                {
                    this.renderCarCiasList()
                }
            </ScrollView>

            <TouchableOpacity onPress={() => Actions.pop() }
                              style={{
                                  backgroundColor: '#00000000',
                                  position: 'absolute',
                                  left: chjStyle.getActualSizeInVertical(20),
                                  top: chjStyle.getActualSizeInVertical(72),
                                  width: chjStyle.getActualSizeInHorizontal(72),
                                  height: chjStyle.getActualSizeInVertical(72)
                              }}>
                <Image source={require('../../../../img/back.png')}
                       resizeMode='contain'
                       style={{
                           width: chjStyle.getActualSizeInHorizontal(72),
                           height: chjStyle.getActualSizeInVertical(72)
                       }}/>
            </TouchableOpacity>

            {
                this.renderPhoneButton()
            }

        </View>);
    }

    renderPhoneButton() {
        if (this.props.hidePhone !== true) {
            return <ModuleButton onClickedListener={() => this.callPhoneNumber()}
                                 buttonStyle={{
                                     backgroundColor: '#FF7200',
                                     width: chjStyle.getActualSizeInHorizontal(750),
                                     height: chjStyle.getActualSizeInVertical(128)
                                 }}
                                 textStyle={[chjStyle.baseText, {
                                     position: 'absolute',
                                     color: '#fff',
                                     width: chjStyle.getActualSizeInHorizontal(750),
                                     top: chjStyle.getActualSizeInVertical(45),
                                     fontSize: chjStyle.getActualFontSize(36),
                                     textAlign: 'center'
                                 }]}
                                 text="立刻联系商家"
            />;
        }
    }


    /**
     *
     *             <Text style={{
                color:'#fff',
                position:'absolute',
                backgroundColor: '#FF8A00',
                textAlign: 'center',
                fontSize:chjStyle.getActualFontSize(30),
                left:chjStyle.getActualSizeInHorizontal(260),
                top:chjStyle.getActualSizeInVertical(150),
                width:chjStyle.getActualSizeInHorizontal(170),
            }}>
     已降3000元
     </Text>
     * */
    renderCarBasicinfo() {
        return <View
            style={{height: chjStyle.getActualSizeInVertical(548), width: chjStyle.getActualSizeInHorizontal(750)}}>
            <Text style={[chjStyle.baseText, {
                color: '#999',
                position: 'absolute',
                fontSize: chjStyle.getActualFontSize(20),
                left: chjStyle.getActualSizeInHorizontal(20),
                top: chjStyle.getActualSizeInVertical(6),
                width: chjStyle.getActualSizeInHorizontal(710),
                height: chjStyle.getActualSizeInVertical(120),
            }]}>
                车辆编号:{this.allAttrData.car.carid}
            </Text>

            <Text
                numberOfLines={2}
                style={[chjStyle.baseText, {
                    color: '#333',
                    position: 'absolute',
                    fontSize: chjStyle.getActualFontSize(35),
                    left: chjStyle.getActualSizeInHorizontal(20),
                    top: chjStyle.getActualSizeInVertical(30),
                    width: chjStyle.getActualSizeInHorizontal(710),
                    height: chjStyle.getActualSizeInVertical(120),
                }]}>
                {this.allAttrData.car.carbrand + ' ' + this.allAttrData.car.carseries + ' ' + this.allAttrData.car.carmodel}
            </Text>
            <Text style={[chjStyle.baseText, {
                color: '#FF2D2D',
                position: 'absolute',
                fontSize: chjStyle.getActualFontSize(60),
                left: chjStyle.getActualSizeInHorizontal(20),
                top: chjStyle.getActualSizeInVertical(120),
                width: chjStyle.getActualSizeInHorizontal(710),
            }]}>
                {this.allAttrData.car.presaleprice}万
            </Text>
            {
                this.renderRecommandPrice()
            }

            {
                this.renderScore()
            }

            <View style={{
                position: 'absolute',
                left: chjStyle.getActualSizeInHorizontal(0),
                top: chjStyle.getActualSizeInVertical(220),
                width: chjStyle.getActualSizeInHorizontal(750),
                height: chjStyle.getActualSizeInVertical(256),
            }}>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(0),
                        top: chjStyle.getActualSizeInVertical(10),
                        fontSize: chjStyle.getActualFontSize(32),
                        color: '#333'
                    }]}>{parseFloat(this.pro0 ? this.pro0 : this.allAttrData.car.travelkilometer).toFixed(2)}万公里</Text>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(0),
                        top: chjStyle.getActualSizeInVertical(60),
                        fontSize: chjStyle.getActualFontSize(26),
                        color: '#aaa'
                    }]}>里程数</Text>

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(250),
                        top: chjStyle.getActualSizeInVertical(10),
                        fontSize: chjStyle.getActualFontSize(32),
                        color: '#333'
                    }]}>{Util.calculateDate(this.allAttrData.car.firstrecorddate)}</Text>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(250),
                        top: chjStyle.getActualSizeInVertical(60),
                        fontSize: chjStyle.getActualFontSize(26),
                        color: '#aaa'
                    }]}>{Util.splitDateDay(this.allAttrData.car.firstrecorddate)}上牌</Text>

                <Text numberOfLines={1}
                      style={[chjStyle.baseText, {
                          position: 'absolute',
                          textAlign: 'center',
                          width: chjStyle.getActualSizeInHorizontal(250),
                          left: chjStyle.getActualSizeInHorizontal(500),
                          top: chjStyle.getActualSizeInVertical(10),
                          fontSize: chjStyle.getActualFontSize(32),
                          color: '#333'
                      }]}>{this.allAttrData.car.carterritorial}</Text>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(500),
                        top: chjStyle.getActualSizeInVertical(60),
                        fontSize: chjStyle.getActualFontSize(26),
                        color: '#aaa'
                    }]}>车牌所在地</Text>

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(0),
                        top: chjStyle.getActualSizeInVertical(138),
                        fontSize: chjStyle.getActualFontSize(32),
                        color: '#333'
                    }]}>{this.pro1}</Text>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(0),
                        top: chjStyle.getActualSizeInVertical(188),
                        fontSize: chjStyle.getActualFontSize(26),
                        color: '#aaa'
                    }]}>排放标准</Text>

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(250),
                        top: chjStyle.getActualSizeInVertical(138),
                        fontSize: chjStyle.getActualFontSize(32),
                        color: '#333'
                    }]}>{this.pro2}</Text>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(250),
                        top: chjStyle.getActualSizeInVertical(188),
                        fontSize: chjStyle.getActualFontSize(26),
                        color: '#aaa'
                    }]}>变速箱</Text>

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(500),
                        top: chjStyle.getActualSizeInVertical(138),
                        fontSize: chjStyle.getActualFontSize(32),
                        color: '#333'
                    }]}>{this.pro3}L</Text>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(500),
                        top: chjStyle.getActualSizeInVertical(188),
                        fontSize: chjStyle.getActualFontSize(26),
                        color: '#aaa'
                    }]}>排放量</Text>
            </View>
            <TouchableOpacity
                onPress={() => this.viewMoreCarParams()}
                style={{
                    position: 'absolute',
                    left: 0,
                    top: chjStyle.getActualSizeInVertical(476),
                    width: chjStyle.width,
                    height: chjStyle.getActualSizeInVertical(80),
                    borderTopWidth: 1 / chjStyle.pi,
                    borderTopColor: '#eee',
                }}
            >
                <Text
                    style={[chjStyle.baseText, {
                        color: '#FF7200',
                        position: 'absolute',
                        textAlign: 'center',
                        fontSize: chjStyle.getActualFontSize(30),
                        left: 0,
                        top: chjStyle.getActualSizeInVertical(18),
                        width: chjStyle.width,
                        height: chjStyle.getActualSizeInVertical(80),
                    }]}
                >查看更多参数></Text>
            </TouchableOpacity>
        </View>
    }

    renderRecommandPrice() {
        if (this.allAttrData.car.isshowassess == '1') {
            return (
                <Text style={[chjStyle.baseText, {
                    color: '#f75',
                    position: 'absolute',
                    fontSize: chjStyle.getActualFontSize(28),
                    left: chjStyle.getActualSizeInHorizontal(260),
                    top: chjStyle.getActualSizeInVertical(155),
                    width: chjStyle.getActualSizeInHorizontal(710),
                }]}>
                    车行家评估价:{this.allAttrData.car.sysappreciate}万
                </Text>
            );
        }
    }

    _renderScore() {
        if (this.props.showRenzheng === true || this.allAttrData.car.isaccred === '1') {
            return <Image
                style={{
                    position: 'absolute',
                    right: chjStyle.getActualSizeInHorizontal(70),
                    top: chjStyle.getActualSizeInVertical(120),
                    width: chjStyle.getActualSizeInHorizontal(93),
                    height: chjStyle.getActualSizeInVertical(70)
                }}
                source={require('../../../../img/scoreIconBig.png')}>
                <Text
                    style={[chjStyle.baseText, {
                        color: '#fff',
                        textAlign: 'center',
                        position: 'absolute',
                        fontWeight: 'bold',
                        fontSize: chjStyle.getActualFontSize(32),
                        width: chjStyle.getActualSizeInHorizontal(93),
                        top: chjStyle.getActualSizeInVertical(16),
                    }]}
                >{Math.floor(this.allAttrData.car.totalscore)}</Text>
            </Image>
        }
    }

    renderCarCiasLisence() {
        // 满足认证条件的时候才显示
        if (this.props.showRenzheng === true || this.allAttrData.car.isaccred === '1') {
            return (<View style={{
                width: chjStyle.width, height: chjStyle.getActualSizeInVertical(1160),
                borderBottomWidth: chjStyle.getActualSizeInVertical(20),
                borderBottomColor: '#eee',
            }}>
                <TouchableOpacity
                    onPress={() => this.viewCiasLisenceDetail()}
                    style={{
                        backgroundColor: '#fff9f1',
                        position: 'absolute',
                        left: 0, top: 0, width: chjStyle.width, height: chjStyle.getActualSizeInVertical(80),
                    }}>
                    <Text
                        style={[chjStyle.baseText, {
                            color: '#FF8A00',
                            position: 'absolute',
                            backgroundColor: 'rgba(0,0,0,0)',
                            fontSize: chjStyle.getActualFontSize(28),
                            left: chjStyle.getActualSizeInHorizontal(30),
                            top: chjStyle.getActualSizeInVertical(23),
                            width: chjStyle.width,
                            height: chjStyle.getActualSizeInVertical(80),
                        }]}
                    >车行家认证:</Text>

                    <Image
                        source={require('../../../../img/ok.png')}
                        resizeMode='contain'
                        style={{
                            position: 'absolute',
                            left: chjStyle.getActualSizeInHorizontal(200),
                            top: chjStyle.getActualSizeInVertical(25),
                            width: chjStyle.getActualSizeInHorizontal(31),
                            height: chjStyle.getActualSizeInVertical(30),
                        }}
                    />

                    <Text
                        style={[chjStyle.baseText, {
                            color: '#555',
                            backgroundColor: 'rgba(0,0,0,0)',
                            position: 'absolute',
                            fontSize: chjStyle.getActualFontSize(28),
                            left: chjStyle.getActualSizeInHorizontal(240),
                            top: chjStyle.getActualSizeInVertical(23),
                            width: chjStyle.width,
                            height: chjStyle.getActualSizeInVertical(80),
                        }]}
                    >15天无理由退换</Text>

                    <Image
                        source={require('../../../../img/ok.png')}
                        resizeMode='contain'
                        style={{
                            position: 'absolute',
                            left: chjStyle.getActualSizeInHorizontal(460),
                            top: chjStyle.getActualSizeInVertical(25),
                            width: chjStyle.getActualSizeInHorizontal(31),
                            height: chjStyle.getActualSizeInVertical(30),
                        }}
                    />

                    <Text
                        style={[chjStyle.baseText, {
                            color: '#555',
                            backgroundColor: 'rgba(0,0,0,0)',
                            position: 'absolute',
                            fontSize: chjStyle.getActualFontSize(28),
                            left: chjStyle.getActualSizeInHorizontal(500),
                            top: chjStyle.getActualSizeInVertical(23),
                            width: chjStyle.width,
                            height: chjStyle.getActualSizeInVertical(80),
                        }]}
                    >1年2万公里质保</Text>

                    <Image
                        source={require('../../../../img/more.png')}
                        style={{
                            position: 'absolute',
                            left: chjStyle.getActualSizeInHorizontal(720),
                            top: chjStyle.getActualSizeInVertical(26),
                            width: chjStyle.getActualSizeInHorizontal(16),
                            height: chjStyle.getActualSizeInVertical(28),
                        }}
                    />
                </TouchableOpacity>
                <Image
                    source={require('../../../../img/cias.jpg')}
                    resizeMode='stretch'
                    style={{
                        position: 'absolute',
                        left: chjStyle.getActualSizeInHorizontal(23),
                        top: chjStyle.getActualSizeInVertical(100),
                        width: chjStyle.getActualSizeInHorizontal(704),
                        height: chjStyle.getActualSizeInVertical(1020),
                    }}>
                    <TouchableOpacity
                        onPress={() => this.viewCiasLisenceDetail1()}
                        style={{
                            backgroundColor: 'rgba(0,0,0,0)',
                            position: 'absolute',
                            left: chjStyle.getActualSizeInHorizontal(140),
                            top: chjStyle.getActualSizeInVertical(520),
                            width: chjStyle.getActualSizeInHorizontal(160),
                            height: chjStyle.getActualSizeInVertical(160),
                        }}/>
                    <TouchableOpacity
                        onPress={() => this.viewCiasLisenceDetail2()}
                        style={{
                            backgroundColor: 'rgba(0,0,0,0)',
                            position: 'absolute',
                            left: chjStyle.getActualSizeInHorizontal(400),
                            top: chjStyle.getActualSizeInVertical(520),
                            width: chjStyle.getActualSizeInHorizontal(160),
                            height: chjStyle.getActualSizeInVertical(160),
                        }}/>
                    <TouchableOpacity
                        onPress={() => this.viewCiasLisenceDetail3()}
                        style={{
                            backgroundColor: 'rgba(0,0,0,0)',
                            position: 'absolute',
                            left: chjStyle.getActualSizeInHorizontal(140),
                            top: chjStyle.getActualSizeInVertical(715),
                            width: chjStyle.getActualSizeInHorizontal(160),
                            height: chjStyle.getActualSizeInVertical(160),
                        }}/>
                    <TouchableOpacity
                        onPress={() => this.viewCiasLisenceDetail4()}
                        style={{
                            backgroundColor: 'rgba(0,0,0,0)',
                            position: 'absolute',
                            left: chjStyle.getActualSizeInHorizontal(400),
                            top: chjStyle.getActualSizeInVertical(715),
                            width: chjStyle.getActualSizeInHorizontal(160),
                            height: chjStyle.getActualSizeInVertical(160),
                        }}/>
                </Image>

            </View>);
        }
    }

    renderCarCiasList() {
        if (this.props.showRenzheng === true || this.allAttrData.car.isaccred === '1') {
            return <View
                style={{
                    width: chjStyle.width, height: chjStyle.getActualSizeInVertical(840),
                    borderBottomWidth: chjStyle.getActualSizeInVertical(20), borderBottomColor: '#eee',
                }}
            >
                <View style={{
                    position: 'absolute',
                    borderBottomWidth: 1,
                    borderBottomColor: '#eee',
                    left: 0,
                    top: chjStyle.getActualSizeInVertical(0),
                    width: chjStyle.width,
                    height: chjStyle.getActualSizeInVertical(100)
                }}><Text style={[chjStyle.baseText, {
                    position: 'absolute',
                    fontSize: chjStyle.getActualFontSize(38),
                    left: chjStyle.getActualSizeInHorizontal(30),
                    top: chjStyle.getActualSizeInVertical(27),
                    width: chjStyle.getActualSizeInHorizontal(300),
                    height: chjStyle.getActualSizeInVertical(67)
                }]}>检测报告</Text></View>
                {
                    this.renderCarCiasItem(this.carframeData, 100, '车辆骨架', require('../../../../img/check1.png'), 28)
                }

                {
                    this.renderCarCiasItem(this.carengineData, 190, '发动机舱', require('../../../../img/check2.png'), 20)
                }

                {
                    this.renderCarCiasItem(this.carstartData, 280, '启动检查', require('../../../../img/check3.png'), 10)
                }

                {
                    this.renderCarCiasItem(this.carcockpitData, 370, '驾驶舱检查', require('../../../../img/check4.png'), 19)
                }

                {
                    this.renderCarCiasItem(this.carbottomData, 460, '底盘检查', require('../../../../img/check5.png'), 8)
                }

                {
                    this.renderCarCiasItem(this.carroadtestData, 550, '路试检查', require('../../../../img/check6.png'), 10)
                }

                {
                    this.renderCarCiasItem(this.carfaceData, 640, '车身外观', require('../../../../img/check7.png'), 38)
                }

                {
                    this.renderCarCiasItem(this.carfunpartsData, 730, '功能性零部件', require('../../../../img/check8.png'), 21)
                }
            </View>
        }
    }

    /**
     <TouchableOpacity
     onPress={()=>this.viewReportDetail(null, '检测报告详细')}
     style={{
                    position:'absolute',
                    left: 0, top:chjStyle.getActualSizeInVertical(820), width:chjStyle.width, height:chjStyle.getActualSizeInVertical(100),
                    borderBottomWidth:chjStyle.getActualSizeInVertical(20),
                    borderBottomColor:'#eee',
                }}
     >
     <Text
     style={{
                        color:'#FF7200',
                        position:'absolute',
                        textAlign:'center',
                        fontSize: chjStyle.getActualSizeInVertical(30),
                        left: 0, top:chjStyle.getActualSizeInVertical(15), width:chjStyle.width, height:chjStyle.getActualSizeInVertical(80),
                    }}
     >查看检测报告详情></Text>
     </TouchableOpacity>
     * */

    renderCarCiasItem(data, top, text, icon, defaultLength) {
        var length = data.length;
        var normal = length;
        var exception = 0;
        for (var i = 0; i < length; i++) {
            var val = data[i].keyvalue;
            if (!val)
                continue;
            if (val === '正常' || val === '无' || val === '是' || val.length === 0)
                continue;
            if (val.indexOf('#') != -1) {
                var dataModel = Util.decodePhotoString(val);
                for (var j = 0; j < dataModel.length; j++) {
                    var node = dataModel[j];
                    if (node.remotePic !== 'null') {
                        normal--;
                        exception++;
                        break;
                    }
                }
            } else {
                normal--;
                exception++;
            }
        }

        if (data.length === 0) {
            length = defaultLength;
            normal = length;
        }

        var statusBool = length == normal;
        var statusStr = normal + '项正常';
        if (!statusBool) {
            statusStr += ',' + exception + '项异常';
        }

        var statusIcon = statusBool ? require('../../../../img/normalIcon.png') : require('../../../../img/error.png');

        return (
            <TouchableOpacity
                onPress={() => this.viewReportDetail(data, text)}
                style={{
                    position: 'absolute',
                    borderBottomWidth: 1,
                    borderBottomColor: '#eee',
                    left: 0,
                    top: chjStyle.getActualSizeInVertical(top),
                    width: chjStyle.width,
                    height: chjStyle.getActualSizeInVertical(90)
                }}>
                <Image source={icon} style={{
                    position: 'absolute',
                    resizeMode: 'contain',
                    left: chjStyle.getActualSizeInHorizontal(30),
                    top: chjStyle.getActualSizeInVertical(12),
                    width: chjStyle.getActualSizeInHorizontal(67),
                    height: chjStyle.getActualSizeInVertical(67)
                }}/>
                <Text style={[chjStyle.baseText, {
                    position: 'absolute',
                    fontSize: chjStyle.getActualFontSize(36),
                    left: chjStyle.getActualSizeInHorizontal(130),
                    top: chjStyle.getActualSizeInVertical(23),
                    width: chjStyle.getActualSizeInHorizontal(300),
                    height: chjStyle.getActualSizeInVertical(67)
                }]}>{text}</Text>
                <Text style={[chjStyle.baseText, {
                    position: 'absolute',
                    textAlign: 'right',
                    fontSize: chjStyle.getActualFontSize(28),
                    right: chjStyle.getActualSizeInHorizontal(80),
                    top: chjStyle.getActualSizeInVertical(28),
                    width: chjStyle.getActualSizeInHorizontal(300),
                    height: chjStyle.getActualSizeInVertical(67)
                }]}>{statusStr}</Text>
                <Image source={statusIcon} resizeMode='contain' style={{
                    position: 'absolute',
                    right: chjStyle.getActualSizeInHorizontal(30),
                    top: chjStyle.getActualSizeInVertical(30),
                    width: chjStyle.getActualSizeInHorizontal(30),
                    height: chjStyle.getActualSizeInVertical(30)
                }}/>
            </TouchableOpacity>
        );
    }

    renderBottomImage(item, i) {

        return (<View style={{
            width: chjStyle.width,
            height: chjStyle.getActualSizeInVertical(510)
        }}>
            <Image
                resizeMode='stretch'
                source={{uri: item.simg}}
                style={{
                    position: 'absolute',
                    left: 0, top: 0, width: chjStyle.width, height: chjStyle.getActualSizeInVertical(500)
                }}/>
            <View style={{
                position: 'absolute',
                backgroundColor: 'rgba(0,0,0,0.6)',
                left: 0,
                top: chjStyle.getActualSizeInVertical(420),
                width: chjStyle.width,
                height: chjStyle.getActualSizeInVertical(80)
            }}
            >
                <Text
                    style={{
                        position: 'absolute',
                        color: '#fff',
                        left: chjStyle.getActualSizeInHorizontal(20),
                        top: chjStyle.getActualSizeInVertical(18),
                    }}
                >{this.state.textArray[i].text}</Text>
            </View>
        </View>)
    }

    // Linking支持如下功能
    // url='http://www.lcode.org' 打开http网页
    // url='https://www.baidu.com' 打开https网页
    // url='smsto:18352402477'  发送短信
    // url='tel:18352402477' 打电话
    // url='mailto:jiangqqlmj@163.com' 发邮件

    callPhoneNumber() {
        if (!this.sourcePhone) {
            return;
        }
        const url = 'tel:' + this.sourcePhone;
        Linking.canOpenURL(url).then(
            support => {
                if (support) {
                    Linking.openURL(url);
                } else {
                    Alert.alert('错误', '系统不支持此功能');
                }
            }
        ).catch(
            err => {
                Alert.alert('错误', err);
            }
        );
    }

    viewAllShopCars() {
        if (!this.sourceName) {
            return;
        }
        Actions.CarsOfShop({
            name: this.sourceName,
            component: CarsOfShop,
            sid: this.sid,
        });
    }

    renderImageSwiper() {
        return <ScrollableTabView
            style={{
                width: customStyle.screenWidth,
                height: customStyle.getActualSizeInHorizontal(500),
            }}
            renderTabBar={() => <View />}
        >
            {
                this.state.pageArray.map((item, i) => this.renderImage(item, i))
            }
        </ScrollableTabView>
    }

    renderImage(item, i) {
        return (
            <View style={{
                width: chjStyle.getActualSizeInHorizontal(750),
                height: chjStyle.getActualSizeInVertical(500)
            }}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => {
                        Actions.ChjGallery({
                            name: 'ChjGallery',
                            images: this.state.pageArray,
                        });
                    }}
                    style={{
                        width: chjStyle.getActualSizeInHorizontal(750),
                        height: chjStyle.getActualSizeInVertical(500)
                    }}>
                    <Image style={{
                        backgroundColor: '#999',
                        width: chjStyle.getActualSizeInHorizontal(750),
                        height: chjStyle.getActualSizeInVertical(500)
                    }}
                           resizeMode='stretch'
                           source={{uri: item.img}}
                    />
                </TouchableOpacity>
            </View>
        );
    }


    requestCarDetail() {
        const params = {
            carid: this.props.data.carid
        };
        Util.postServer('user/queryCarAllAttr', params, (result) => {
                if (result.status === '0') {
                    this.sid = result.data.car.sid;

                    this.params = [];
                    this.allAttrData = result.data;

                    this.carframeData = [];
                    this.carengineData = [];
                    this.carstartData = [];
                    this.carcockpitData = [];
                    this.carbottomData = [];
                    this.carroadtestData = [];
                    this.carfaceData = [];
                    this.carfunpartsData = [];

                    const pageArray = [];
                    const textArray = [];

                    const smallPicUrl = result.data['256PicUrl'];
                    const picUrl = result.data["512PicUrl"];
                    const length = result.data.car.carattrlist.length;
                    for (let i = 0; i < length; i++) {
                        const attr = result.data.car.carattrlist[i];
                        if (attr.sign === "mustpicture" || attr.sign === "otherpicture") {
                            const dataModel = Util.decodePhotoString(attr.keyvalue);

                            for (let j = 0; j < dataModel.length; j++) {
                                const node = dataModel[j];
                                if (node.remotePic !== 'null') {
                                    pageArray.push({
                                        img: picUrl + node.remotePic,
                                        simg: smallPicUrl + node.remotePic,
                                        bimg: picUrl + node.remotePic
                                    });
                                    textArray.push({text: node.name});
                                }
                            }
                        }

                        if (attr.keyname.indexOf("排量") !== -1)
                            this.pro3 = attr.keyvalue;
                        else if (attr.keyname.indexOf("变速器形式") !== -1)
                            this.pro2 = attr.keyvalue;
                        else if (attr.keyname.indexOf("排放标准") !== -1)
                            this.pro1 = attr.keyvalue;
                        else if (attr.keyname.indexOf('表征里程') !== -1)
                            this.pro0 = attr.keyvalue;

                        if (attr.sign === 'carconfig') {
                            this.params.push(attr);
                        }

                        if (attr.sign === 'carframe')
                            this.carframeData.push(attr);
                        else if (attr.sign === 'carengine')
                            this.carengineData.push(attr);
                        else if (attr.sign === 'carstart')
                            this.carstartData.push(attr);
                        else if (attr.sign === 'carcockpit')
                            this.carcockpitData.push(attr);
                        else if (attr.sign === 'carbottom')
                            this.carbottomData.push(attr);
                        else if (attr.sign === 'carroadtest')
                            this.carroadtestData.push(attr);
                        else if (attr.sign === 'carface')
                            this.carfaceData.push(attr);
                        else if (attr.sign === 'carfunparts')
                            this.carfunpartsData.push(attr);
                    }

                    this.state.textArray = textArray;

                    this.setState({
                        isLoading: false,
                        pageArray: pageArray,
                        textArray: textArray
                    });

                    this.requestCarSourceList();
                }
                else {
                    Alert.alert(result.msg);
                }
            },
            (msg) => {
                Alert.alert(msg);
            });
    }

    requestCarSourceList() {
        const params = {
            type: null,
            userid: Util.getUser().id,
        };
        Util.postServer('user/carsourcelist', params, (result) => this.onRequestListSuccess(result), (msg) => this.onRequestListFailed(msg));
    }

    onRequestListSuccess(result) {
        Util.storage.save({
            key: 'carsource',
            id: '1000',
            rawData: result.data.sourcelist
        });
        // this.setState({isLoading:false, sourcelist: result.data.sourcelist});

        for (let i = 0; i < result.data.sourcelist.length; i++) {
            const source = result.data.sourcelist[i];
            if (source.sid === this.sid) {
                this.sourcePhone = source.phone;


                const type = source.type;
                if (type === 2) {
                    this.sourceName = source.source;
                } else {
                    this.sourceName = source.phone;
                }
                this.refs.viewShopCars.setState({text: this.sourceName});
                break;
            }
        }
    }

    onRequestListFailed(msg) {
    }

    viewMoreCarParams() {
        Actions.MoreCarParams({
            name: 'MoreCarParams',
            component: MoreCarParams,
            params: this.params,
            title: '车辆参数详细',
        });
    }

    viewCiasLisenceDetail() {
        Actions.CiasLisenceDetail();
    }

    viewCiasLisenceDetail1() {
        Actions.CiasLisenceDetail1();
    }

    viewCiasLisenceDetail2() {
        Actions.CiasLisenceDetail2();
    }

    viewCiasLisenceDetail3() {
        Actions.CiasLisenceDetail3();
    }

    viewCiasLisenceDetail4() {
        Actions.CiasLisenceDetail4();
    }

    viewReportDetail(params, title) {
        if (!params) {
            params = [];
            params = params.concat(this.carframeData);
            params = params.concat(this.carengineData);
            params = params.concat(this.carstartData);
            params = params.concat(this.carcockpitData);
            params = params.concat(this.carbottomData);
            params = params.concat(this.carroadtestData);
            params = params.concat(this.carfaceData);
            params = params.concat(this.carfunpartsData);
        }
        Actions.MoreCarReports(
            {
                name: 'MoreCarReports',
                params: params,
                title: title,
            }
        );
    }
}